<!DOCTYPE html>
<html>

<head>
<meta charset="UTF-8">
<title>Table</title>
<link rel="stylesheet" href="../../plugins/layui/css/layui.css" media="all" />
<link rel="stylesheet" href="../../css/global.css" media="all">
<link rel="stylesheet" href="../../plugins/font-awesome/css/font-awesome.min.css">
<link rel="stylesheet" href="../../css/table.css" />
</head>

<body>
<div class="admin-main">
    <div class="panel-body">
        <div class="layui-form-item">
            <label class="layui-form-label">订单单号</label>
            <div class="layui-input-inline">
                <input type="text" name="orderCode" id="orderCode" placeholder="请输入订单单号" autocomplete="off" class="layui-input">
            </div>

            <label class="layui-form-label">下单时间</label>
            <div class="layui-input-inline">
                <input class="layui-input" placeholder="开始日" id="beginDate">
            </div>
            <div class="layui-input-inline">
                <input class="layui-input" placeholder="截止日" id="endDate">
            </div>
        </div>
    </div>
    <div class="panel-body">
        <div class="layui-form-item">
            <label class="layui-form-label">底盘号</label>
            <div class="layui-input-inline">
                <input type="text" name="vehicleVin"  id="vehicleVin" placeholder="请输入底盘号" autocomplete="off" class="layui-input">
            </div>
            <label class="layui-form-label"></label>
            <div>
            </div>
            <div class="layui-input-inline">
                <button class="layui-btn"  id="search">查询</button>
                <button type="reset" class="layui-btn layui-btn-primary" id="searchReset">重置</button>
            </div>
        </div>
    </div>
</div>
<div class="admin-main">
    <div style="width: 1900px;">
    <fieldset class="layui-elem-field">

        <div style="overflow:auto; width: 100%;">
            <table class="layui-table admin-table" >
                <thead>
                <tr>
                    <th style="width: 4%">序号</th>
                    <th style="width: 6%">运单号</th>
                    <th style="width: 6%">接单时间</th>
                    <th style="width: 6%">底盘号</th>
                    <th style="width: 6%">车型编码</th>
                    <th style="width: 10%">经销商</th>
                    <th style="width: 15%">经销商地址</th>
                    <th style="width: 6%">提车时间</th>
                    <th style="width: 7%">当前状态</th>
                    <th style="width: 6%">运抵时间</th>
                    <th style="width: 6%">标准交付时间</th>
                    <th style="width: 6%">实际交付时间</th>
                    <th style="width: 6%">运单创建时间</th>
                    <th style="width: 6%">异常信息</th>
                </tr>
                </thead>
                <tbody id="content">
                </tbody>
            </table>
        </div>
    </fieldset>
    </div>
    <div class="admin-table-page">
        <div id="paged" class="page">
        </div>
    </div>
</div>
<!--模板-->
<script type="text/html" id="tpl">

    {{# layui.each(d.data, function(index, item){ }}
    <tr>
        <td>{{ index+1 }}</td>
        <td>{{ item.orderCode }}</td>
        <td>{{ item.gmtOrderReceived }}</td>
        <td>{{ item.vehicleVin }}</td>
        <td>{{ item.vehicleCode }}</td>
        <td>{{ item.s2pName }}</td>
        <td>{{ item.s2pAddrDetail }}</td>
        <td>{{ item.gmtInboundPickup }}</td>
        <td>{{ item.orderStatus == null?'': item.orderStatus  }}</td>
        <td>{{ item.gmtArrival == null?'':item.gmtArrival  }}</td>
        <td>{{ item.gmtStandardDelivery == null?'':item.gmtStandardDelivery}}</td>
        <td>{{ item.gmtActualDelivery == null?'':item.gmtActualDelivery}}</td>
        <td>{{ item.gmtCreate == null?'':item.gmtCreate}}</td>
        <td>{{ item.phase3ExcepRemark == null? (item.phase2ExcepRemark==null?item.phase1ExcepRemark:''):item.phase3ExcepRemark}}</td>
    </tr>
    {{# }); }}

</script>
<script type="text/javascript" src="../../plugins/layui/layui.js"></script>
<script>
    layui.config({
        base: '../../js/'
    });
    layui.use(['paging','form','baajax','laydate'], function() {
        var $ = layui.jquery,
            paging = layui.paging(),
            layerTips = parent.layer === undefined ? layui.layer : parent.layer, //获取父窗口的layer对象
            layer = layui.layer, //获取当前窗口的layer对象
            form = layui.form(),
            laydate = layui.laydate;
        baajax=layui.baajax;

        paging.init({
            openWait: true,
            url: 'order_list?v=' + new Date().getTime(), //地址
            elem: '#content', //内容容器
            params: { //发送到服务端的参数

            },
            type: 'POST',
            tempElem: '#tpl', //模块容器
            pageConfig: { //分页参数配置
                elem: '#paged', //分页容器
                pageSize: 10 //分页大小
            },
            success: function() { //渲染成功的回调
                //alert('渲染成功');
            },
            fail: function(msg) { //获取数据失败的回调
                layer.msg(msg);
                //alert('获取数据失败')
            }
        });

        var start = {
            max: '2099-06-16 23:59:59'
            ,istoday: false
            ,choose: function(datas){
                end.min = datas; //开始日选好后，重置结束日的最小日期
                end.start = datas //将结束日的初始值设定为开始日
            }
        };

        var end = {
            max: '2099-06-16 23:59:59'
            ,istoday: false
            ,choose: function(datas){
                start.max = datas; //结束日选好后，重置开始日的最大日期
            }
        };

        document.getElementById('beginDate').onclick = function(){
            start.elem = this;
            laydate(start);
        };
        document.getElementById('endDate').onclick = function(){
            end.elem = this
            laydate(end);
        };


        //查询
        $('#search').on('click', function() {
            var orderCode = $('#orderCode').val();
            var vehicleVin = $('#vehicleVin').val();
            var beginDate = $('#beginDate').val();
            var endDate = $('#endDate').val();
            //调用get方法获取数据
            paging.get({
                orderCode: orderCode,//获取输入的关键字。
                vehicleVin: vehicleVin,//获取输入的关键字。
                beginGmtOrderReceived: beginDate,//获取输入的关键字。
                endGmtOrderReceived: endDate, //获取输入的关键字。
                //beginGmtCreate: beginGmtCreate, //获取输入的关键字。
                //endGmtCreate: endGmtCreate //获取输入的关键字。
            });
        });
        //查询
        $('#searchReset').on('click', function() {
            var orderCode = $('#orderCode').val('');
            var vehicleVin = $('#vehicleVin').val('');
            var beginDate = $('#beginDate').val('');
            var endDate = $('#endDate').val('');
            //调用get方法获取数据
            paging.get({
                orderCode: '',//获取输入的关键字。
                vehicleVin: '',//获取输入的关键字。
                beginGmtOrderReceived:'',
                endGmtOrderReceived:''

            });
        });
    });

</script>
</body>

</html>